<template>
  <div class="like">
    <p>猜你喜欢</p>
  </div>
  <div class="like-ct">
     <router-link v-for="(item,index) in goods" :key="index" custom :to="`/detail/${item.id}`" #default="{navigate}">
         <my-card  :itemObj="item" @click="navigate"></my-card>
      </router-link>
  </div>
</template>
<script>
import { getGoods } from "../api/home/index.js";
import { reactive,toRefs } from 'vue';
import myCard from '../components/myCard';
export default {
  components:{myCard},
  setup(props) {
    // 总数据是28，每页4条 可以分 7 页；
    const data = reactive({
        goods:[]
    });
    // Math.random() 0-1的随机数
    let num = parseInt(Math.random()*7);
    getGoods({ page: num || 1, pageSize: 4 }).then((res) => {
      // 获取商品列表的数据
      data.goods = res.data;
    });
    return {
      ...toRefs(data)
    }
  },
};
</script>

<style lang="scss" scoped>
.like {
  margin-top: 10px;
  p {
    height: 50px;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
  }
}
.like-ct{
    display: flex;
    background: #fff;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 10px;
    box-sizing: border-box;
  }
</style>
